<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .warn{
            color: orange;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <h1>123</h1>
    <div>
        <p>1</p>
        <p id="current" class="abcd">2</p>
        <p>3</p>
    </div>
    <h2>456</h2>
    <script>
        //获取   id为   current的元素  ，  依次输出   h1的内容，h2的内容，  第三个p的内容3   
        //1 首先获取地标型的节点
        let oLoc = document.querySelector("#current");
        //2 通过 在 周边各节点漫游的方式获取对应的节点
        let oH1 = oLoc.parentElement.previousElementSibling;
        console.log(oH1.innerHTML);
        let oH2 = oH1.nextElementSibling.nextElementSibling;
        console.log(oH2.innerHTML);
        // let oP = oLoc.nextElementSibling;
        let oP = oH2.previousElementSibling.lastElementChild;
        console.log(oP.innerText);
        //3 获取属性节点的方法
        console.log(oLoc.getAttribute("class"));//abcd
        

        //4 增加节点
        let oNewP = document.createElement("p");//创建了一个  元素节点
        let oTxt = document.createTextNode("hello");//创建   文本节点
        
        //  当前   是碎片状态
        //需要组装
        oNewP.appendChild(oTxt);
        oNewP.setAttribute("class","warn");

        //挂载到  DOM树才可以被访问
        oLoc.parentElement.insertBefore(oNewP,oLoc);

        //5   删除操作
        // oNewP.remove();
        // delete oNewP;
        // oNewP = null;
        // oNewP.removeChild(oNewP.firstElementChild);
        oNewP.removeAttribute("class");
        // oNewP.setAttribute("class","");
        //6 改
        oNewP.innerHTML = "hello world";
        // oLoc.replaceChild
    </script>
</body>
</html>